<template>
  <div id="app" class="ordering bg-gray-100 min-h-screen py-10">
    <div class="container mx-auto px-4">
      <h1 class="text-4xl font-bold text-center text-gray-800 mb-8">
        皇甫谧 - 魏晋时期学者、医学家
      </h1>
      <div class="bg-white p-8 rounded-lg shadow-md mb-8">
        <h2 class="text-2xl font-bold text-gray-800 mb-4">皇甫谧简介</h2>
        <p class="text-gray-700 text-lg leading-relaxed mb-4">
          皇甫谧（215 年～282 年），幼名静，字士安，自号玄晏先生。安定郡朝那县（今甘肃省灵台县）人，魏晋时期学者、医学家、史学家。他一生以著述为业，在医学、文学、史学等方面均有很高造诣，其著作对后世影响深远。
        </p>
      </div>
      <div class="bg-white p-8 rounded-lg shadow-md mb-8">
        <h2 class="text-2xl font-bold text-gray-800 mb-4">皇甫谧生平时间轴</h2>
        <div class="timeline">
          <div class="timeline-container left">
            <div class="timeline-content">
              <h3>215 年</h3>
              <p>皇甫谧出生于安定郡朝那县。</p>
            </div>
          </div>
          <div class="timeline-container right">
            <div class="timeline-content">
              <h3>少年时期</h3>
              <p>皇甫谧少年时好玩耍，游荡无度，后经叔母教导，开始发愤读书。</p>
            </div>
          </div>
          <div class="timeline-container left">
            <div class="timeline-content">
              <h3>专注著述</h3>
              <p>皇甫谧终生不仕，埋首著述，编撰了《针灸甲乙经》《历代帝王世纪》《高士传》等多部著作。</p>
            </div>
          </div>
          <div class="timeline-container right">
            <div class="timeline-content">
              <h3>医学贡献</h3>
              <p>他所著的《针灸甲乙经》是中国第一部针灸学的专著，对针灸学的发展起到了重要推动作用。</p>
            </div>
          </div>
          <div class="timeline-container left">
            <div class="timeline-content">
              <h3>疾病缠身</h3>
              <p>皇甫谧中年以后疾病缠身，却依然坚持著书立说，为后世留下了宝贵的文化遗产。</p>
            </div>
          </div>
          <div class="timeline-container right">
            <div class="timeline-content">
              <h3>282 年</h3>
              <p>皇甫谧去世，享年六十八岁。</p>
            </div>
          </div>
        </div>
      </div>
      <div class="bg-white p-8 rounded-lg shadow-md mb-8">
        <h2 class="text-2xl font-bold text-gray-800 mb-4">皇甫谧主要著作影响力统计</h2>
        <div id="bookChart" class="w-full h-64"></div>
      </div>
      <div class="bg-white p-8 rounded-lg shadow-md">
        <h2 class="text-2xl font-bold text-gray-800 mb-4">皇甫谧相关图片展示</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
          <img src="https://img1.baidu.com/it/u=2018315298,298358374&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=717" alt="皇甫谧相关图片1" class="w-full h-auto rounded-md">
          <img src="https://img2.baidu.com/it/u=3563448124,1864647332&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=544" alt="皇甫谧相关图片2" class="w-full h-auto rounded-md">
          <img src="https://img1.baidu.com/it/u=72572734,284717701&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=940" alt="皇甫谧相关图片3" class="w-full h-auto rounded-md">
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import echarts from '@/assets/echarts.min.js';

export default {
  data() {
    return {
      bookData: {
        xAxisData: ['《针灸甲乙经》', '《历代帝王世纪》', '《高士传》'],
        seriesData: [90, 70, 60]
      }
    };
  },
  mounted() {
    this.$nextTick(() => {
      const myChart = echarts.init(document.getElementById('bookChart'));
      const option = {
        color: ['#6699FF', '#FF9966', '#99CC99'],
        xAxis: {
          type: 'category',
          data: this.bookData.xAxisData,
          axisTick: {
            alignWithLabel: true
          },
          axisLine: {
            lineStyle: {
              color: '#ccc'
            }
          },
          axisLabel: {
            fontSize: 14,
            fontWeight: 'bold',
            color: '#333'
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: '#ccc'
            }
          },
          splitLine: {
            lineStyle: {
              color: '#f0f0f0'
            }
          },
          axisLabel: {
            fontSize: 14,
            fontWeight: 'bold',
            color: '#333'
          }
        },
        series: [
          {
            data: this.bookData.seriesData,
            type: 'bar',
            barWidth: '40%',
            itemStyle: {
              borderRadius: 5,
              shadowColor: 'rgba(0, 0, 0, 0.3)',
              shadowBlur: 5,
              shadowOffsetX: 2,
              shadowOffsetY: 2
            },
            label: {
              show: true,
              position: 'top',
              fontSize: 14,
              fontWeight: 'bold',
              color: '#333'
            }
          }
        ],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          backgroundColor: 'rgba(0, 0, 0, 0.7)',
          textStyle: {
            color: '#fff'
          }
        }
      };
      myChart.setOption(option);
    });
  }
};
</script>

<style scoped>
.timeline {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
}

.timeline::after {
  content: '';
  position: absolute;
  width: 6px;
  background-color: #333;
  top: 0;
  bottom: 0;
  left: 50%;
  margin-left: -3px;
}

.timeline-container {
  padding: 10px 40px;
  position: relative;
  background-color: inherit;
  width: 50%;
}

.timeline-container::after {
  content: '';
  position: absolute;
  width: 25px;
  height: 25px;
  right: -13px;
  background-color: white;
  border: 4px solid #FF9F55;
  top: 15px;
  border-radius: 50%;
  z-index: 1;
}

.left {
  left: 0;
}

.right {
  left: 50%;
}

.left::before {
  content: ' ';
  height: 0;
  position: absolute;
  top: 22px;
  width: 0;
  z-index: 1;
  right: 30px;
  border: medium solid white;
  border-width: 10px 0 10px 10px;
  border-color: transparent transparent transparent white;
}

.right::before {
  content: ' ';
  height: 0;
  position: absolute;
  top: 22px;
  width: 0;
  z-index: 1;
  left: 30px;
  border: medium solid white;
  border-width: 10px 10px 10px 0;
  border-color: transparent white transparent transparent;
}

.right::after {
  left: -13px;
}

.timeline-content {
  padding: 20px 30px;
  background-color: white;
  position: relative;
  border-radius: 6px;
}

@media screen and (max-width: 600px) {
 .timeline::after {
    left: 31px;
  }

 .timeline-container {
    width: 100%;
    padding-left: 70px;
    padding-right: 25px;
  }

 .timeline-container::before {
    left: 60px;
    border: medium solid white;
    border-width: 10px 10px 10px 0;
    border-color: transparent white transparent transparent;
  }

 .left::after,
 .right::after {
    left: 18px;
  }

 .right {
    left: 0%;
  }
}
</style>